<script>
import { svg } from "../../assets/font/symbol-defs.js";

const createSvg = (svg, selector = "") => {
  const element = document.querySelector(selector);
  if (!element) {
    const div = document.createElement("div");
    div.id = selector;
    div.innerHTML = svg;
    document.body.appendChild(div);
  }
};
// 手动创建svg插入到html中，本地加载svg文件会导致svg图标无法显示， 提示Unsafe attempt to load URL
createSvg(svg, "u-svg");

export default {
  name: "SvgIcon",
  props: {
    icon: {
      type: String,
      required: true,
      default: "",
    },
    size: {
      type: [String, Number],
      default: 20,
    },
    fill: {
      type: String,
      default: "currentColor",
    },
    custom: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    href() {
      return `#icon-${this.icon}`;
    },
  },
};
</script>

<template>
  <svg
    class="icon"
    :class="[`uicon-${icon}`]"
    :height="size"
    :width="size"
    :fill="fill"
    :viewBox="`0 0 ${size} ${size}`"
  >
    <use :xlink:href="href" />
  </svg>
</template>
